.role {
	width: calc(30% - 40px);
	height: calc(100% - 40px);
	padding: 20px;
	background-color: var(--app-container-bg);
	transition: 0.3s;
	&:hover {
		box-shadow: var(--app-container-box-show);
	}
	.role-list {
		width: 100%;
		height: calc(100% - 40px);
		overflow-y: scroll;
		border-radius: 4px;
		.role-ul {
			padding: 0;
			margin: 0;
			transition: 0.3s;
			.role-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				&:hover {
					.role-li {
						color: var(--app-text-primary);
					}
				}
				.role-li {
					flex: 7;
					margin-right: 10px;
					overflow-x: scroll;
					letter-spacing: 5px;
					list-style-type: none;
					cursor: pointer;
				}
				.role-operate {
					display: flex;
					flex: 3;
					justify-content: end;
					overflow-x: scroll;
					span {
						cursor: pointer;
						~ span {
							margin-left: 10px;
						}
						&:hover {
							color: var(--app-text-primary);
						}
					}
				}
			}
			.active {
				color: var(--app-text-primary);
			}
		}
	}
	.el-button {
		width: 100px;
		height: 30px;
		margin-top: 20px;
		margin-left: calc(100% - 100px);
	}
}
